<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>中国地图下钻示例演示</title>
  <style>
    body {
      text-align: center;
    }
  </style>
</head>

<body>
  <div class="back">返 回</div>
  <div id="main" style="height: 100vh;width: 100vw;"></div>
  <script src="https://cdn.staticfile.net/jquery/3.7.1/jquery.js"></script>
  <script src="https://cdn.staticfile.net/echarts/5.4.3/echarts.min.js"></script>
  <script
    src="https://webapi.amap.com/maps?v=1.3&key=73cddabc2173e0166a622f4483d3592a&plugin=AMap.DistrictSearch"></script>
  <script src="https://webapi.amap.com/maps?v=1.3&key=73cddabc2173e0166a622f4483d3592a"></script>
  <script src="https://webapi.amap.com/ui/1.0/main.js"></script>
  <script>


    $('.back').css({
      'position': 'absolute',
      'left': '25px',
      'top': '25px',
      'color': 'rgb(179, 239, 255)',
      'font-size': '16px',
      cursor: 'pointer',
      'z-index': '100'
    })

    $('.back').click(function () {
      if (parentInfo.length === 1) {
        return;
      }
      parentInfo.pop()
      getGeoJson(parentInfo[parentInfo.length - 1].code)
    })

    var myChart = echarts.init(document.getElementById("main"));

    var geoJson = {
      features: []
    }

    var parentInfo = [{
      cityName: '全国',
      level: 'china',
      code: 100000
    }]

    var timeTitle = ['2016']
    getGeoJson(100000)


    function getGeoJson(adcode) {
      AMapUI.loadUI(['geo/DistrictExplorer'], DistrictExplorer => {
        var districtExplorer = new DistrictExplorer()
        districtExplorer.loadAreaNode(adcode, function (error, areaNode) {
          if (error) {
            console.error(error);
            return;
          }
          let Json = areaNode.getSubFeatures()
          if (Json.length > 0) {
            geoJson.features = Json
          } else if (Json.length === 0) {
            geoJson.features = geoJson.features.filter(item => item.properties.adcode == adcode)
            if (geoJson.features.length === 0) return
          }
          getMapData()
        });
      })
    }

    //获取数据    拼接，获取近五年的数据
    function getMapData() {
      let mapData = {},
        pointData = {},
        sum = {}
      for (let i = 0; i < timeTitle.length; i++) {
        mapData[timeTitle[i]] = []
        pointData[timeTitle[i]] = []
        sum[timeTitle[i]] = 0
        for (let j = 0; j < geoJson.features.length; j++) {
          let value = Math.random() * 3000
          mapData[timeTitle[i]].push({
            name: geoJson.features[j].properties.name,
            value: value,
            level: geoJson.features[j].properties.level,
            cityCode: geoJson.features[j].properties.adcode
          })
          pointData[timeTitle[i]].push({
            name: geoJson.features[j].properties.name,
            value: [geoJson.features[j].properties.center[0], geoJson.features[j].properties.center[1], value],
            cityCode: geoJson.features[j].properties.adcode
          })
          sum[timeTitle[i]] += value
        }
        mapData[timeTitle[i]] = mapData[timeTitle[i]].sort(function (a, b) {
          return b.value - a.value
        });
      }
      initEchartMap(mapData, sum, pointData)
    }


    //渲染echarts
    function initEchartMap(mapData, sum, pointData) {

      //这里做个切换，全国的时候才显示南海诸岛  只有当注册的名字为china的时候才会显示南海诸岛
      if (parentInfo.length === 1) {
        echarts.registerMap('china', geoJson); //注册
      } else {
        echarts.registerMap('map', geoJson); //注册
      }

      var option = {
        timeline: {
          // data: timeTitle,
          // axisType: 'category',
          // autoPlay: true,
          // playInterval: 3000,
          // left: '10%',
          // right: '10%',
          // bottom: '3%',
          // width: '80%',
          // label: {
          //     normal: {
          //         textStyle: {
          //             color: 'rgb(179, 239, 255)'
          //         }
          //     },
          //     emphasis: {
          //         textStyle: {
          //             color: '#fff'
          //         }
          //     }
          // },
          // symbolSize: 10,
          // lineStyle: {
          //     color: '#8df4f4'
          // },
          // checkpointStyle: {
          //     borderColor: '#8df4f4',
          //     color: '#53D9FF',
          //     borderWidth: 2,
          // },
          // controlStyle: {
          //     showNextBtn: true,
          //     showPrevBtn: true,
          //     normal: {
          //         color: '#53D9FF',
          //         borderColor: '#53D9FF'
          //     },
          //     emphasis: {
          //         color: 'rgb(58,115,192)',
          //         borderColor: 'rgb(58,115,192)'
          //     }
          // },

        },
        baseOption: {
          animation: true,
          animationDuration: 1000,
          animationEasing: 'cubicInOut',
          animationDurationUpdate: 1000,
          animationEasingUpdate: 'cubicInOut',
          tooltip: {
            trigger: "item",
          },
          toolbox: {
            feature: {
              restore: {
                show: false
              },
              dataView: {
                optionToContent: function (opt) {
                  let series = opt.series[0].data //折线图数据
                  let tdHeads = '<th  style="padding: 0 20px">所在地区</th><th style="padding: 0 20px">销售额</th>' //表头
                  let tdBodys = '' //数据
                  let table = `<table border="1" style="margin-left:20px;border-collapse:collapse;font-size:14px;text-align:left;"><tbody><tr>${tdHeads} </tr>`
                  for (let i = 0; i < series.length; i++) {
                    table += `<tr>
                              <td style="padding: 0 50px">${series[i].name}</td>
                              <td style="padding: 0 50px">${series[i].value.toFixed(2)}万</td>
                              </tr>`
                  }
                  table += '</tbody></table>'
                  return table
                }
              },
              saveAsImage: {
                name: parentInfo[parentInfo.length - 1].cityName + '销售额统计图'
              },
              dataZoom: {
                show: false
              },
              magicType: {
                show: false
              }
            },
            iconStyle: {
              normal: {
                borderColor: '#1990DA'
              }
            },
            top: 15,
            right: 35
          },
          geo: {
            map: parentInfo.length === 1 ? 'china' : 'map',
            zoom: 1.1,
            roam: true,
            tooltip: {
              trigger: 'item',
              formatter: (p) => {
                let val = p.value[2];
                if (window.isNaN(val)) {
                  val = 0;
                }
                let txtCon =
                  "<div style='text-align:left'>" + p.name + ":<br />销售额：" + val.toFixed(2) + '万</div>';
                return txtCon;
              }
            },
            label: {
              normal: {
                show: true,
                color: "rgb(249, 249, 249)", //省份标签字体颜色
                formatter: p => {
                  switch (p.name) {
                    case '内蒙古自治区':
                      p.name = "内蒙古"
                      break;
                    case '西藏自治区':
                      p.name = "西藏"
                      break;
                    case '新疆维吾尔自治区':
                      p.name = "新疆"
                      break;
                    case '宁夏回族自治区':
                      p.name = "宁夏"
                      break;
                    case '广西壮族自治区':
                      p.name = "广西"
                      break;
                    case '香港特别行政区':
                      p.name = "香港"
                      break;
                    case '澳门特别行政区':
                      p.name = "澳门"
                      break;
                    default:
                      break;
                  }
                  return p.name;
                }
              },
              emphasis: {
                show: true,
                color: '#f75a00',
              }
            },
            itemStyle: {
              normal: {
                areaColor: '#24CFF4',
                borderColor: '#53D9FF',
                borderWidth: 1.3,
                shadowBlur: 15,
                shadowColor: 'rgb(58,115,192)',
                shadowOffsetX: 7,
                shadowOffsetY: 6,
              },
              emphasis: {
                areaColor: '#8dd7fc',
                borderWidth: 1.6,
                shadowBlur: 25,
              }

            },
          },

        },
        options: []
      }
      timeTitle.forEach(item => {
        var min = mapData[item][mapData[item].length - 1].value
        var max = mapData[item][0].value
        if (mapData[item].length === 1) {
          min = 0
        }
        option.options.push({
          backgroundColor: '#012248',
          title: [{
            left: 'center',
            top: 10,
            text: item + '年' + parentInfo[parentInfo.length - 1].cityName + '销售额统计图(可点击)',
            textStyle: {
              color: 'rgb(179, 239, 255)',
              fontSize: 16
            },
          },
          {
            text: "年度销售总额：" + sum[item].toFixed(2) + '万',
            left: 'center',
            top: '6.5%',
            textStyle: {
              color: '#FFAC50',
              fontSize: 26
            }
          }
          ],
          visualMap: {
            min: min,
            max: max,
            left: '3%',
            bottom: '5%',
            calculable: true,
            seriesIndex: [0],
            inRange: {
              color: ['#24CFF4', '#2E98CA', '#1E62AC']
            },
            textStyle: {
              color: '#24CFF4'
            }
          },
          series: [{
            name: item + '销售额度',
            type: 'map',
            geoIndex: 0,
            map: parentInfo.length === 1 ? 'china' : 'map',
            roam: true,
            zoom: 1.3,
            tooltip: {
              trigger: "item",
              formatter: p => {
                let val = p.value;
                if (p.name == '南海诸岛') return
                if (window.isNaN(val)) {
                  val = 0;
                }
                let txtCon =
                  "<div style='text-align:left'>" + p.name + ":<br />销售额：" + val.toFixed(2) + '万</div>';
                return txtCon;
              }
            },
            label: {
              normal: {
                show: false,
              },
              emphasis: {
                show: false,
              }
            },
            data: mapData[item],

          }, {
            name: '散点',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            rippleEffect: {
              brushType: 'fill'
            },
            itemStyle: {
              normal: {
                color: '#F4E925',
                shadowBlur: 10,
                shadowColor: '#333'
              }
            },
            data: pointData[item],
            // symbolSize: 8,
            symbolSize: function (val) {
              let value = val[2]
              if (value == max) {
                return 11
              }
              return 10
            },
            showEffectOn: 'render', //加载完毕显示特效
          },

          ]
        })
      })

      myChart.setOption(option, true)


      //点击前解绑，防止点击事件触发多次
      myChart.off('click');
      myChart.on('click', echartsMapClick);
    }

    //echarts点击事件
    function echartsMapClick(params) {
      if (!params.data) {
        return
      } else {
        //如果当前是最后一级，那就直接return
        if (parentInfo[parentInfo.length - 1].code == params.data.cityCode) {
          return
        }
        let data = params.data
        parentInfo.push({
          cityName: data.name,
          level: data.level,
          code: data.cityCode
        })
        getGeoJson(data.cityCode)
      }
    }
  </script>
</body>

</html>